<template>
<div class="clear-fix">
  <ul>
    <li @click="clicklink(index)" 
        class="path-link-item" 
        v-for="(item, index) in pathlink" :key="index">
      <h3><a href="javascript:void(0)">{{item.title}}</a>&nbsp;></h3>
    </li>
  </ul>
</div>
</template>

<script>
export default{
  name: 'pathlink',
  data () {
    return {
      path: '/about'
    }
  },
  props: {
    pathlink: {
      type: Array,
      default() {
        return [{
          title: '主页',
          topath: '/home'
        }, 
        {
          title: '关于',
          topath: '/about'
        }]
      }
    }
  },
  methods: {
    //点击切换路径
    clicklink(index) {
      this.path = this.pathlink[index].topath
      if(this.$route.path != this.path) {
        this.$router.replace(this.path)
      }
    }
  }
}
</script>

<style scoped>
.path-link-item{
  float: left;
}
</style>
